<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .fall {
            width: 15px;
            height: 15px;
            background: #fff;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <script>
        var windowWidth = window.screen.width;
        var windowHeight = window.screen.height;

        function createFall() {
            var left = 0;
            var top = 0;
            // 随机位置
            var left_random = Math.random() * windowWidth;
            var top_random = Math.random() * windowHeight;

            // 创建一个小球
            var div = document.createElement('div');
            div.className = 'fall';
            div.style.transform = 'scale(' + (Math.random()) + ')';
            document.body.appendChild(div);

            setInterval(function () {

                // 小球的移动
                var x = left_random + left;
                var y = top_random + top;
                div.style.left = x + 'px';
                div.style.top = y + 'px';
                left += 0.2;
                top += 0.2;

                if (x >= windowWidth) {
                    left_random = Math.random();
                    left = 0;
                }
                
                if (y >= windowHeight) {
                    top_random = Math.random();
                    top = 0;
                }
            }, 10)
        }

        for (var i = 0; i < 150; i++) {
            createFall();
        }
    </script>
</body>

</html>